<!-- 登录组件 -->
<template>
    <div class="login1">
        <div class="login2">
            <div class="login3">
                <img src="../assets/logo.png" alt="" class="img1">
            </div>

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                &emsp; &emsp; &emsp;
                <el-form-item prop="username">
                    用户名：<el-input v-model="ruleForm.username" prefix-icon="el-icon-user-solid"  clearable style="width:400px" class="inp1"></el-input>
                </el-form-item>


                &emsp; &emsp;&emsp;&emsp;
                <el-form-item prop="password">
                    密码：&emsp; <el-input v-model="ruleForm.password" prefix-icon="el-icon-s-goods"  clearable type="password" style="width:400px"
                        class="inp2">
                    </el-input>
                </el-form-item>
                <br>

                <el-button type="primary" class="denglu" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')" class="cz" >重置</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
// 进入需要的接口
import { login } from "../http/api"
import jwt_decode from 'jwt-decode'
export default {
    name: 'Login',
    data() {
        return {
            ruleForm: {
                username: "",
                password: "",
            },
            // 校验
            rules: {
                username: [
                    { required: true, message: '请输入正确的用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入正确的密码', trigger: 'change' }
                ]
            }
        };
    },

    components: {},

    computed: {},

    mounted() { },

    methods: {
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    login(this.ruleForm).then(res => {
                        console.log(res);
                        var token = res.data.data.token
                        localStorage.setItem('token', token)
                        let decode = jwt_decode(localStorage.token)
                        this.$store.dispatch('setUser', decode)
                        this.$message({
                            type: "success",
                            message: "登陆成功！"
                        })
                        this.$router.push('/welcome')

                    })
                } else {
                    console.log('error submit!!');
                    return false;

                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    watch: {},
    mixins: []
}

</script>
<style  scoped lang="less" >
.login1 {
    width: 100%;
    height: 100%;
    background-color: #2b4b6b;
}

.login2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto 0;
    width: 600px;
    height: 380px;
    background-color: #fff;
}

.login3 {
    width: 150px;
    height: 150px;
    background-color: #eee;
    box-shadow: 0 0 10px rgb(206, 206, 206);
    border-radius: 50%;
    border: 10px solid rgb(255, 255, 255);
    position: absolute;
    top: -70px;
    left: 210px;
}

.img1 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 27px;
    left: 24px;
}

.inp1 {
    margin: 100px 0 0 0;
}

.denglu {
    margin-left: 380px;
}
.cz{
    background-color: #909399;
    color:#fff;
}
</style>